<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能办公系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">


    <link rel="stylesheet" th:href="${pc} + '/static/css/index.css'" />




    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入 ElementUI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入 Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <el-container>
            <!-- 添加侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="logo" :class="{'logo-collapse': isCollapse}">
                    <i class="el-icon-eleme"></i>
                    <span style="padding-left: 6px;" v-show="!isCollapse">{{systemTitle}}</span>
                </div>
                <el-menu
                    background-color="transparent"
                    text-color="#fff"
                    active-text-color="#00ffff"
                    :default-active="activeMenu"
                    :default-openeds="[]"
                    class="el-menu-vertical"
                    :collapse="isCollapse"
                    :collapse-transition="false">

                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span @click="goHomePage" slot="title">首页</span>
                    </el-menu-item>

                    <el-submenu v-for="item in menuList" :index="item.flag">
                        <template slot="title">
                            <i :class="'el-icon-' + item.icon"></i>
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item v-for="child in item.sub" :index="child.flag">
                            <i :class="'el-icon-' + child.icon"></i>
                            <span @click="openUrl(item, child)">{{child.name}}</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-container>
                <!-- 添加顶部导航 -->
                <el-header>
                    <div class="header-left">
                        <i class="el-icon-s-fold" @click="toggleCollapse"></i>
                    </div>
                    <div class="header-right">
                        <!-- 消息通知 -->
                        <div class="message-badge" @click="showMessages">
                            <el-badge :value="3" class="message-icon">
                                <i class="el-icon-bell"></i>
                            </el-badge>
                        </div>
                        <!-- 用户信息 -->
                        <div class="user-info">
                            <el-dropdown trigger="click">
                                <span class="user-dropdown">
                                    <i class="el-icon-user-solid"></i>
                                    superAdmin
                                    <i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <i class="el-icon-s-custom"></i> 个人中心
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <i class="el-icon-setting"></i> 系统设置
                                    </el-dropdown-item>
                                    <el-dropdown-item >
                                        <span @click="logOutPage">
                                                <i class="el-icon-switch-button"></i> 退出登录
                                        </span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>

                <!-- 主要内容区域 -->
                <el-main>
                    <div class="container">

                        <div class="module-header" @click="hiddenSearch=!hiddenSearch">
                            <i :class="'fa-solid fa-angle-double-' + ( hiddenSearch ? 'down' : 'up') "></i>
                            <el-link  type="primary" style="color:white;">条件搜索</el-link>
                        </div>
                        <el-card v-show="!hiddenSearch">
                            <!-- 搜索区域 -->
                            <div class="search-area">
                                <el-row gutter="24">
                                         <el-col :span="4"><el-input v-model="searchForm.title" placeholder="请输入标题"></el-input> </el-col>
                                         <el-col :span="6"><el-input v-model="searchForm.url" placeholder="请输入网址"></el-input> </el-col>
                                         <el-col :span="10">
                                             <template>
                                             <div class="block">
                                                 <span>创建时间</span>
                                                 <el-date-picker
                                                         v-model="value2"
                                                         type="datetimerange"
                                                         :unlink-panels="true"
                                                         :value-format="'yyyy-MM-dd HH:mm:ss'"
                                                         :picker-options="pickerOptions"
                                                         range-separator="至"
                                                         start-placeholder="开始日期"
                                                         end-placeholder="结束日期"
                                                         align="right">
                                                 </el-date-picker>
                                             </div>
                                             </template>
                                         </el-col>
                                         <el-col :span="4" style="padding-top:8px;">
                                                <span :style="{fontWeight: 'bold', color: searchForm.status == 1 ? 'green' : 'red' }">状态</span>
                                                <el-switch style="    padding-left: 10px; padding-bottom: 6px;"
                                                           v-model="searchForm.status"
                                                           :active-value="1"
                                                           :inactive-value="0"
                                                           active-color="#13ce66"
                                                           inactive-color="#ff4949"
                                                >状态</el-switch>
                                         </el-col>
                                </el-row>


                                <el-input v-model="searchForm.keywords" placeholder="请输入关键词"></el-input>
                            </div>
                            <!-- 搜索按钮组 -->
                            <div class="search-buttons">
                                <el-button @click="searchByFilter" type="primary" icon="el-icon-search">搜索</el-button>
                                <el-button type="success" icon="el-icon-refresh">重置</el-button>
                            </div>
                        </el-card>



                        <!-- 在三个图表行后添加表格模块 -->
                        <div class="table-module">
                            <div style="display: flex;justify-content: space-between;">
                                <div class="module-header">
                                    <i class="el-icon-tickets"></i>
                                    <span class="table-title-info">网址</span>
                                    <span class="table-title-info"> / </span>
                                    <span class="table-title-info">开放</span>
                                </div>
                                <div>
                                    <!-- 操作按钮组 -->
                                    <div class="action-buttons">
                                        <el-button-group>
                                            <el-button type="primary" @click="dialogVisible = true" icon="el-icon-plus">新建</el-button>
                                            <el-button type="success" icon="el-icon-upload2">数据导入</el-button>
                                            <el-button type="warning" icon="el-icon-download">导出</el-button>
                                            <el-button type="danger" icon="el-icon-download">批量删除</el-button>
                                            <el-button type="success" icon="el-icon-s-home">训练</el-button>
                                        </el-button-group>
                                    </div>
                                </div>
                            </div>
                            <div class="table-container">
                                <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    :header-cell-style="{ background: 'rgba(4, 28, 75, 0.8)', color: '#fff' }"
                                    :cell-style="{ background: 'transparent', color: '#fff' }"
                                    border>
                                    <el-table-column
                                        type="index"
                                        label="序号"
                                        width="80"
                                        align="center">
                                    </el-table-column>
                                    <el-table-column  prop="title" label="标题" :width="200" align="center" >
                                        <template slot-scope="scope">
                                            <div style="display: flex; justify-content: space-between;width:90%;margin:0 auto;">
                                                <div>{{ scope.row.title }}</div>
                                                <div style="color:green;font-weight: bold;cursor:pointer;" @click="copyById(scope.row.id)">复制</div>
                                            </div>
                                        </template>
                                    </el-table-column>

                                    <el-table-column  prop="url" label="网址" :width="300" >
                                        <template slot-scope="scope">
                                            <div>
                                                <div class="joker-link">
                                                    <el-link :title="scope.row.url" type="primary" :icon="'el-icon-'+scope.row.icon" :href="scope.row.url" target="_blank"
                                                             :style="{
                                                                        whiteSpace: 'nowrap',
                                                                        overflow: 'hidden',
                                                                        textOverflow: 'ellipsis'
                                                                        }"
                                                    >{{scope.row.url}}</el-link>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>

                                    <el-table-column  prop="detail" label="关键词"  >
                                        <template slot-scope="scope">
                                            <div v-if="scope.row.detail">
                                               <el-tag effect="dark" v-for="item in scope.row.detail.split(/[,，]/)" type="plain">{{item}}</el-tag>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="time" label="创建时间" width="180" align="center"> </el-table-column>
                                    <el-table-column prop="status" label="状态" width="100" align="center">
                                            <template slot-scope="scope">
                                                <el-switch v-model="scope.row.status"
                                                           :active-value="1"
                                                           :nactive-value="0"
                                                           active-color="#13ce66"
                                                           inactive-color="#ff4949"
                                                >
                                                </el-switch>
                                            </template>
                                    </el-table-column>

                                    <el-table-column
                                        label="操作"
                                        :width="200"
                                        align="center">
                                        <template slot-scope="scope">
                                            <div class="operation-btns">
                                                <el-button type="text" size="small" @click="handleEdit(scope.row)">
                                                    <i class="el-icon-edit"></i> 编辑
                                                </el-button>
                                                <el-button type="text" size="small" @click="handleView(scope.row)">
                                                    <i class="el-icon-view"></i> 查看
                                                </el-button>
                                                <el-button type="text" size="small" class="delete-btn" @click="handleDelete(scope.row)">
                                                    <i class="el-icon-delete"></i> 删除
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                
                                <!-- 分页器 -->
                                <div class="pagination-container">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pagination.currentPage"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pagination.pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="pagination.total">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>

                        <!-- 新建对话框 -->
                        <el-dialog
                            title="新建小区"
                            :visible.sync="dialogVisible"
                            width="50%"
                            :close-on-click-modal="false"
                            :before-close="handleClose">
                            <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="区/县" prop="district">
                                            <el-select v-model="formData.district" placeholder="请选择区县" style="width: 100%">
                                                <el-option label="环翠" value="环翠"></el-option>
                                                <el-option label="文登" value="文登"></el-option>
                                                <el-option label="荣成" value="荣成"></el-option>
                                                <el-option label="乳山" value="乳山"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="小区名称" prop="name">
                                            <el-input v-model="formData.name" placeholder="请输入小区名称"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="经度" prop="longitude">
                                            <el-input v-model="formData.longitude" placeholder="请输入经度"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="纬度" prop="latitude">
                                            <el-input v-model="formData.latitude" placeholder="请输入纬度"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="房屋类型" prop="houseType">
                                            <el-radio-group v-model="formData.houseType">
                                                <el-radio label="住宅">住宅</el-radio>
                                                <el-radio label="商铺">商铺</el-radio>
                                                <el-radio label="办公">办公</el-radio>
                                                <el-radio label="车位">车位</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="详细地址" prop="address">
                                    <el-input v-model="formData.address" placeholder="请输入详细地址"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="handleClose">取 消</el-button>
                                <el-button type="primary" @click="submitForm">确 定</el-button>
                            </span>
                        </el-dialog>

                        <!-- 在container div内的最底部添加 -->
                        <div class="footer">
                            <div class="footer-content">
                                <div class="footer-section">
                                    <h3>关于我们</h3>
                                    <p>威海市智慧社区管理平台</p>
                                    <p>专注于提供智能化社区解决方案</p>
                                </div>
                                <div class="footer-section">
                                    <h3>联系方式</h3>
                                    <p>电话：400-888-9999</p>
                                    <p>邮箱：support@weihai.gov.cn</p>
                                </div>
                                <div class="footer-section">
                                    <h3>备案信息</h3>
                                    <p>Copyright © 2024 威海市智慧社区</p>
                                    <p>鲁ICP备12345678号-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script th:src="@{/static/js/const.js}"></script>


    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    hiddenSearch: false,
                    searchForm: {
                        district: '',
                        street: '',
                        community: '',
                        name: '',
                        address: '',
                        status: 1
                    },
                    systemTitle: '智能办公系统',
                    dialogVisible: false,
                    formData: {
                        district: '',
                        name: '',
                        longitude: '',
                        latitude: '',
                        address: '',
                        houseType: '住宅'
                    },
                    rules: {
                        district: [
                            { required: true, message: '请选择区县', trigger: 'change' }
                        ],
                        name: [
                            { required: true, message: '请输入小区名称', trigger: 'blur' },
                            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                        ],
                        longitude: [
                            { required: true, message: '请输入经度', trigger: 'blur' },
                            { pattern: /^[\d.]+$/, message: '请输入正确的经度格式', trigger: 'blur' }
                        ],
                        latitude: [
                            { required: true, message: '请输入纬度', trigger: 'blur' },
                            { pattern: /^[\d.]+$/, message: '请输入正确的纬度格式', trigger: 'blur' }
                        ],
                        address: [
                            { required: true, message: '请输入详细地址', trigger: 'blur' }
                        ],
                        houseType: [
                            { required: true, message: '请选择房屋类型', trigger: 'change' }
                        ]
                    },

                    menuList: [],

                    activeMenu: '5-10',  // 修改为默认选中首页
                    isCollapse: false,  // 控制菜单折叠状态
                    chartTimeRange: '7',
                    notices: [],
                    todoFilter: 'all',
                    todos: [],
                    tableData: [],
                    pagination: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 100
                    },
                    pickerOptions: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                    value2: [new Date(2025, 1, 1, 0, 0, 0), new Date(2025, 2, 11, 23, 59, 59)],
                    value1: ''
                }
            },
            computed: {
                completedTodos() {
                    return this.todos.filter(todo => todo.done).length;
                }
            },
            methods: {

                searchByFilter() {
                    // 在这里实现搜索逻辑
                    console.log('搜索条件：', this.value2);
                },

                handleClose() {
                    this.$refs.formRef.resetFields();
                    this.dialogVisible = false;
                },
                submitForm() {
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            // TODO: 处理表单提交
                            console.log('表单数据:', this.formData);
                            this.$message.success('提交成功');
                            this.handleClose();
                        } else {
                            return false;
                        }
                    });
                },
                // 切换菜单折叠状态
                toggleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },
                // 添加菜单点击处理方法
                handleSelect(index, indexPath) {
                    this.activeMenu = index;
                    // 根据需要处理路由跳转或其他逻辑
                },

                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.loadTableData();
                },
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    this.loadTableData();
                },
                handleEdit(row) {
                    console.log('编辑', row);
                    // TODO: 实现编辑功能
                },
                handleView(row) {
                    console.log('查看', row);
                    // TODO: 实现查看功能
                },
                handleDelete(row) {
                    this.$confirm('确认删除<span style="color:red;">小区信息</span>吗？', '提示', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // TODO: 实现删除功能
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                loadTableData() {
                    axios.get(cst.gateway + cst.module.url + "/open/url/" + "all", {
                        params: {
                            cpage: this.pagination.currentPage,
                            csize: this.pagination.pageSize
                        }
                    })
                        .then((response) => {
                            if (response.data.code === 200) {
                                const info = response.data.data;
                                this.tableData = info.list;
                                this.pagination.total = info.total;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                },
                showMessages() {
                    // TODO: 显示消息列表
                    this.$message({
                        message: '您有3条未读消息',
                        type: 'info'
                    });
                },
                logOutPage() {
                    window.location.href = '/pc' + '/login';
                },
                clearCompletedTodos() {
                    this.todos = this.todos.filter(todo => !todo.done);
                },
                loadMenus() {
                    axios.get(cst.gateway + cst.module.auth + "/sysinfo/menu/" + "sidebar")
                        .then((response) => {
                            if (response.data.code === 200) {
                                this.menuList = response.data.data;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                },
                openUrl(dir, item) {
                    window.location.href = "/pc" + "/data" + dir.url+ item.url + "?t=" + new Date().getTime();
                },
                goHomePage() {
                    window.location.href = "/pc"  + "/index";
                },
                copyById(id) {
                    this.$message.info(id)
                },
            },
            mounted() {
                this.loadMenus();
                //

                this.loadTableData();
            }
        })
    </script>
</body>
</html>

